<template>
  <div>
    <!-- 操作 -->
    <div class="dis-o-between operate-line">
      <div>
        <el-button icon="el-icon-plus" plain type="primary" @click="add(1)" size="small">新增</el-button>
      </div>
      <RightToolbar :search="false" @queryTable="reqTableData()">
      </RightToolbar>
    </div>
    <el-row class="title ofenList align-center" style="width:100%;margin-top:10px">
      <el-row style="width:100%;margin-bottom:10px" v-for="(item, index) in oftenTypeList" :key="index">
        <el-row
          style="width:100%;margin-bottom:12px;flex-direction: row;justify-content: flex-start;align-items: center;">
          <div style="font-size:16px;font-weight:500;margin: 0 20px 0px 20px;display: inline-block">{{ item.oftenName }}
          </div>
          <el-button icon="el-icon-delete" type="default" size="small" @click="delItem(item)"></el-button>
        </el-row>
        <div style="width:100%">
          <el-row style="width:100%">
            <el-tag style="margin-right:8px;margin-bottom: 6px;" v-for="(ele, index) in item.list" :key="index"
              @close="handleClose(ele, index)" closable> {{ ele.oftenName }} </el-tag>
            <!--   -->
            <el-input v-if="item.inputVisible" style="width: 200px;margin-right:8px" ref="saveTagInput" size="small"
              v-model="ruleForm.oftenName" placeholder="" @keyup.enter.native="handleInputConfirm(item, ele)"
              @blur="handleInputConfirm(item, ele)" clearable>
            </el-input>
            <el-button v-if="!item.inputVisible" class="button-new-tag" size="small" @click="showInput(item)">
              +新增</el-button>
          </el-row>
        </div>
      </el-row>
    </el-row>
    <el-dialog v-dialogDrag title="新增常用字段" :visible.sync="dialogVisible" width="500px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="字段名称" prop="oftenName">
          <el-input v-model="ruleForm.oftenName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'field',
  data() {
    return {
      oftenTypeList: '',
      dialogVisible: false,
      ruleForm: {
        oftenName: null,
      },
      rules: {
        oftenName: [
          { required: true, message: '请输入字段名称', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
        ],

      },
    }
  },
  props: {},

  components: {},

  created() { },

  mounted() {
    this.reqTableData();
  },

  beforeDestroy() { },

  methods: {
    reqTableData() {
      this.oftenTypeList = []
      this.sendPost('/OftenType/getOftenTypeObj', {}).then(res => {
        if (res.errcode == 0) {
          this.oftenTypeList = res.data.list
        }
      })
    },
    add(type, item, index) {
      if (type == 1) {
        this.ruleForm = {
          oftenName: null,
        }
        this.dialogVisible = true;
      } else if (type == 2) {
        console.log(item);
        this.ruleForm = {
          oftenName: null,
          parentOftenUuid: item.oftenUuid
        }
        this.dialogVisible = true;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            ...this.ruleForm,
          }
          this.sendPost('/OftenType/insertOrUpdateOftenType', data).then(res => {
            if (res.errcode === 0) {
              this.suc({ message: res.errmsg });
              this.ruleForm = {};
              this.reqTableData()
              this.dialogVisible = false;
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    delItem(item) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sendGet('/OftenType/delete', { id: item.id }).then(res => {
          if (res.errcode === 0) {
            this.suc({ message: res.errmsg });
          }
          this.reqTableData()
        })
      }).catch(() => { });
    },
    handleClose(tag) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sendGet('/OftenType/delete', { id: tag.id }).then(res => {
          if (res.errcode === 0) {
            this.suc({ message: res.errmsg });
          }
          this.reqTableData()
        })
      }).catch(() => { });
    },

    showInput(item, ele) {
      item.inputVisible = true;
      this.ruleForm = {
        oftenName: null,
        parentOftenUuid: item.oftenUuid
      }
      this.$nextTick(_ => {
        this.$refs.saveTagInput[0].focus();
      });
    },

    handleInputConfirm(item, ele) {
      if (this.ruleForm.oftenName) {
        let data = {
          ...this.ruleForm
        }
        this.sendPost('/OftenType/insertOrUpdateOftenType', data).then(res => {
          if (res.errcode === 0) {
            this.suc({ message: res.errmsg });
            this.ruleForm = {};
            this.reqTableData()
            item.inputVisible = false;
          }
        })
      } else {
        item.inputVisible = false;
        this.$forceUpdate();
      }
    }
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {}
};
</script>

<style scoped lang="scss"></style>
